<template>
  <div>
    <el-row>
      <el-row class="title">基本信息</el-row>
      <el-row class="content">
        <el-row class="form-row">
          <el-col :span="6">姓名</el-col>
          <el-col :span="18" style="color: #909399">{{ tcInfo.name }}</el-col>
        </el-row>
<!--        <el-row class="form-row">-->
<!--          <el-col :span="6">当前头像</el-col>-->
<!--          <el-col :span="18" class="button-div">-->
<!--            <el-avatar shape="square" :size="100" :src="squareUrl"></el-avatar>-->
<!--            <el-upload-->
<!--              action="#"-->
<!--            ></el-upload>-->
<!--            <span><el-button type="primary">上传</el-button></span>-->
<!--          </el-col>-->
<!--        </el-row>-->
        <el-row class="form-row">
          <el-col :span="6">平台角色</el-col>
          <el-col :span="18" style="color: #909399">教师</el-col>
        </el-row>
        <el-row class="form-row">
          <el-col :span="6">学工号</el-col>
          <el-col :span="18" style="color: #909399">{{ tcInfo.teacherId }}</el-col>
        </el-row>
      </el-row>
      <el-row class="title">绑定信息</el-row>
      <el-row class="content">
        <el-row class="form-row">
          <el-col :span="6">密码</el-col>
          <el-col :span="14"
          >
            <el-input
              placeholder="请输入密码"
              v-model="password"
              show-password
              disabled
            ></el-input
            >
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>
        <el-row class="form-row">
          <el-col :span="6">e-mail</el-col>
          <el-col :span="14"
          >
            <el-input
              placeholder="请输入e-mail地址"
              v-model="tcInfo.email"
              disabled
            ></el-input
            >
          </el-col>
        </el-row>
        <el-row class="form-row">
          <el-col :span="6">手机号码</el-col>
          <el-col :span="14"
          >
            <el-input
              placeholder="请输入手机号"
              v-model="tcInfo.telephone"
              :disabled="disabled"
            ></el-input
            >
          </el-col>
        </el-row>
        <el-row class="form-row">
          <el-col :span="6">教师简介</el-col>
          <el-col :span="14"
          >
            <el-input
              placeholder="请输入手机号"
              type="textarea"
              :rows="4"
              v-model="tcInfo.teacherProfile"
              :disabled="disabled"
            ></el-input
            >
          </el-col>
        </el-row>
        <el-row class="form-row">
          <el-col :span="6">
            <div></div>
          </el-col>
          <el-col :span="18">
            <el-button
              size="mini"
              type="primary"
              plain
              class="fix-button"
              @click="changepassword"
            >修改
            </el-button
            >
          </el-col>
        </el-row>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import Crscard from "./NBClassCard";
import Todolist from "./Todolist";
import state from '../../store/index'
import tc from '../../store/teacher'
import axios from "axios";
import qs from "qs";

export default {
  components: {Crscard, Todolist},
  computed: {
    userInfo() {
      return state.getters.userInfo
    },
    tcInfo: {
      get() {
        return tc.getters.getTeacherInfo
      },
      set(v) {
        tc.commit('setTeacherInfo', v)
      }
    },
  },
  mounted() {
    // this.tcInfo = this.tcInfo
  },
  data() {
    return {
      lists: [1, 2, 3, 4],
      // tcInfo: {},
      squareUrl:
        "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      password: "123456",
      email: "20256684@zju.edu.cn",
      phone: "12304560789",
      disabled: true,
    };
  },
  methods: {
    async changepassword() {
      console.log(1);
      if (this.disabled === false) {// 上交
        await axios.post('/api/setTeacherProfile',
          qs.stringify({authorizeToken: this.userInfo.authorizeToken, newProfile: this.tcInfo.teacherProfile}))
          .then(res1 => {
            console.log(res1)
          })
        await axios.post('/api/setTeacherTelephone',
          qs.stringify({authorizeToken: this.userInfo.authorizeToken, newTelephone: this.tcInfo.telephone}))
          .then(res1 => {
            console.log(res1)
          })
        tc.commit('setTeacherInfo',this.tcInfo)
        this.$message.success("修改信息成功")

      }
      this.disabled = !this.disabled;
    },
  },
};
</script>

<style scoped>
.todo-list {
  padding: 10px;
  min-height: 150px;
  position: relative;
}

.icon {
  width: 30px;
  height: 30px;
}

.form-row {
  padding: 15px 30px 10px;
}

.button-div {
  height: 100%;
  display: flex;
  flex-flow: column-reverse;
}

.title {
  padding: 10px;
}

.content {
  background-color: #ffffff;
  margin-bottom: 30px;
}

.fix-button {
  border: 5px;
  margin: 5px;
}
</style>
